var map = new BMap.Map("map", {}); 
	                       // 创建Map实例
    map.centerAndZoom(new BMap.Point(104.7, 31.8), 9.8);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
	map.setMapStyleV2({     
	  styleId: '367561f0c3825b1916c1c0c69aa86833'
	});
	function getBoundary(){       
			var bdary = new BMap.Boundary();
			bdary.get("绵阳市安州区", function(rs){       //获取行政区域    
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
	          	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});   
			bdary.get("绵阳市涪城区", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});
			bdary.get("绵阳市江油市", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市北川羌族自治县", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市盐亭县", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市三台县", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市平武县", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市游仙区", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
			bdary.get("绵阳市梓潼县", function(rs){       //获取行政区域
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (count === 0) {
					alert('未能获取当前输入行政区域');
					return ;
				}
			  	var pointArray = [];
				for (var i = 0; i < count; i++) {
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#23918E"}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					pointArray = pointArray.concat(ply.getPath());
				}    
				// map.setViewport(pointArray);    //调整视野              
			});  
		}
		getBoundary();
	function p(e){
		var id=e.id;  // 添加海量点数据
		src=e.src.slice(e.src.lastIndexOf('/'));
		if(src==`/${id}1.png`){
			e.src="img/"+id+"2"+".png";
			if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
			    var points=[];
				for (var i =0;i< data[id].zuobiao.length;i++) {
				  points.push(new BMap.Point(data[id].zuobiao[i][0], data[id].zuobiao[i][1]));
				 }
				var options = {
			        size: BMAP_POINT_SIZE_NORMAL,
			        shape: BMAP_POINT_SHAPE_STAR,
			        color: data[id].color
			    }
			    var pointCollection= new BMap.PointCollection(points, options);  // 初始化PointCollection
			    pointCollection.addEventListener('mouseover', function (e) {
			      			for (var i = 0; i < data[id].zuobiao.length; i++) {
			      				points.push(new BMap.Point(data[id].zuobiao[i][0], data[id].zuobiao[i][1]));
			      				if(data[id].zuobiao[i][0]==e.point.lng&&data[id].zuobiao[i][1]==e.point.lat){// 经度==点击的,维度
			      					break;
			      				}
			      			}
							leida(data[id].zuobiao[i][3],data[id].zuobiao[i][4],data[id].zuobiao[i][5],data[id].zuobiao[i][6],data[id].zuobiao[i][2])
			      			var point = new BMap.Point(e.point.lng, e.point.lat);
			      			var marker = new BMap.Marker(point);
			      			
			      			var opts = {
			      				width: 150, // 信息窗口宽度
			      				height: 5, // 信息窗口高度
			      				title:"店铺名称", // 信息窗口标题
			      				}
			      			var Content = "<div>"
			      				+ "<p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em;color:#000'>店铺名称："+data[id].zuobiao[i][2]+"</p></br>"
			      				+ "</div>";
			      			var infoWindow = new BMap.InfoWindow(Content);  // 创建信息窗口对象 
			      			map.openInfoWindow(infoWindow,point); //开启信息窗口
			    });
				// pointCollection.addEventListener('click',function(e){
				// 	for (var i = 0; i < data[id].zuobiao.length; i++) {
				// 		points.push(new BMap.Point(data[id].zuobiao[i][0], data[id].zuobiao[i][1]));
				// 		if(data[id].zuobiao[i][0]==e.point.lng&&data[id].zuobiao[i][1]==e.point.lat){// 经度==点击的,维度
				// 			break;
				// 		}
				// 	}
				// 	var point = new BMap.Point(e.point.lng, e.point.lat);
				// 	var marker = new BMap.Marker(point);
				// 	var opts = {
				// 		width: 150, // 信息窗口宽度
				// 		height: 5, // 信息窗口高度
				// 		title:"店铺信息", // 信息窗口标题
				// 		}
				// 	var Content = "<div>"+"<br>"
				// 		+"<p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em;color:#000'>店铺星级："+data[id].zuobiao[i][3]+"</p>"
				// 		+"<p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em;color:#000'>口味评分："+data[id].zuobiao[i][4]+"</p>"
				// 		+"<p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em;color:#000'>环境评分："+data[id].zuobiao[i][5]+"</p>"
				// 		+ "<p style='margin:0;line-height:1.5;font-size:12px;text-indent:2em;color:#000'>服务评分："+data[id].zuobiao[i][6]+"</p></br>"
				// 		+ "</div>";
				// 	var infoWindow = new BMap.InfoWindow(Content);  // 创建信息窗口对象 
				// 	map.openInfoWindow(infoWindow,point); //开启信息窗口
				// });
			    map.addOverlay(pointCollection);  // 添加Overlay
			} else {
			    alert('请在chrome、safari、IE8+以上浏览器查看本示例');
			}
		}else if(src==`/${id}2.png`){
			e.src="img/"+id+"1"+".png";
			pointCollection.clear();
		}
		
	}
function zhexian(data) {
	var dom = document.getElementById("view6");
	var myChart = echarts.init(dom);
	var option = {
		// title: {
		// 	text: '2015年饮食时序图',
		// 	top:"15%",
		// 	textStyle:{
		// 		fontSize:18,
		// 		color:"black"
		// 	}
		// },
		tooltip: {
			trigger: 'axis'
		},
		color: ['red','orange','#635ba2','#FCF54C', '#A2007C','skyblue',
						'#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7','#ff4343','#E61A78',
				    ],
		legend: {
			data: ['咖啡厅', '川菜', '火锅', '快餐', '西餐', '烧烤', '甜点', '自助餐', '日式料理', '韩式料理', '美食', '其他菜系', '其他']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '2%',
			containLabel: true
		},
		// toolbox: {
		// 	feature: {
		// 		saveAsImage: {}
		// 	}
		// },
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
			name: '月'
		},
		yAxis: {
			type: 'value',
			//name: '评论数(总量)'
		},
		series: [{
				name: '咖啡厅',
				type: 'line',
				stack: '总量',
				data: data.咖啡厅,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '川菜',
				type: 'line',
				stack: '总量',
				data: data.川菜,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '火锅',
				type: 'line',
				stack: '总量',
				data: data.火锅,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '快餐',
				type: 'line',
				stack: '总量',
				data: data.快餐,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '西餐',
				type: 'line',
				stack: '总量',
				data: data.西餐,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '烧烤',
				type: 'line',
				stack: '总量',
				data: data.烧烤,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '甜点',
				type: 'line',
				stack: '总量',
				data: data.甜点,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '自助餐',
				type: 'line',
				stack: '总量',
				data: data.自助餐,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '日式料理',
				type: 'line',
				stack: '总量',
				data: data.日式料理,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '韩式料理',
				type: 'line',
				stack: '总量',
				data: data.韩式料理,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '美食',
				type: 'line',
				stack: '总量',
				data: data.美食,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '其他菜系',
				type: 'line',
				stack: '总量',
				data: data.其他菜系,
				smooth:true,
				areaStyle: {}
			},
			{
				name: '其他',
				type: 'line',
				stack: '总量',
				data: data.其他,
				smooth:true,
				areaStyle: {}
			}
		]
	};
	myChart.setOption(option)
}
$.get('data/shixu.json', (data) => {
	zhexian(data);
})
function bingtu(){
	myecharts=echarts.init(document.getElementById('view2'))
	option = {
	    
		title : [
		{
		    text: '顾客满意度',
		    x:'left',
			textStyle:{
				fontSize:18,
				color:"black"
			}
		},
		{
		    text: '综合评价',
		    x:'15%',
			y:'48%',
			textStyle:{
				fontSize:16,
				color:"black"
			}
		},
		{
		    text: '口味',
		    x:'70%',
			y:'48%',
			textStyle:{
				fontSize:16,
				color:"black"
			}
		},
		
		{
		    text: '环境',
		    x:'20%',
			y:'88%',
			textStyle:{
				fontSize:16,
				color:"black"
			}
		},
		{
		    text: '服务',
		    x:'70%',
			y:'88%',
			textStyle:{
				fontSize:16,
				color:"black"
			}
		},
		],
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    series : [
	        {
	            name: '综合评价',
	            type: 'pie',
	            radius : '25%',
	            center: ['30%', '30%'],
	            data:[
					{
						"name": "糟糕",
						"value": 1034
					},
					{
						"name": "较差",
						"value": 1034
					},
					{
						"name": "一般",
						"value": 3885
					},
					{
						"name": "较好",
						"value": 8576
					},
					{
						"name":"很好",
						"value":18851
					}	
				],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        },
		
			{
				title:'tast',
			    name: '口味',
			    type: 'pie',
			    radius : '17%',
			    center: ['75%', '30%'],
			    data:[
					{
						"name": "0星",
						"value": 824
					},
					{
						"name": "1星",
						"value": 1301
					},
					{
						"name": "2星",
						"value": 4024
					},
					{
						"name": "3星",
						"value": 8511
					},
					{
						"name": "4星",
						"value": 18720
					}
				],
			    itemStyle: {
			        emphasis: {
			            shadowBlur: 10,
			            shadowOffsetX: 0,
			            shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			    }
			},
			{
			    name: '环境',
			    type: 'pie',
			    radius : '17%',
			    center: ['25%', '75%'],
			    data:[
				{
					"name": "0星",
					"value": 578
				},
				{
					"name": "1星",
					"value": 1269
				},
				{
					"name": "2星",
					"value": 3998
				},
				{
					"name": "3星",
					"value": 8462
				},
				{
					"name": "4星",
					"value": 79073
				}],
			    itemStyle: {
			        emphasis: {
			            shadowBlur: 10,
			            shadowOffsetX: 0,
			            shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			    }
			},
			{
			    name: '服务',
			    type: 'pie',
			    radius : '17%',
			    center: ['75%', '75%'],
			    data:[
					{
						"name": "0星",
						"value": 977
					},
					{
						"name": "1星",
						"value": 1309
					},
					{
						"name": "2星",
						"value": 3616
					},
					{
						"name": "3星",
						"value": 7871
					},
					{
						"name": "4星",
						"value": 19607
					}
				],
			    itemStyle: {
			        emphasis: {
			            shadowBlur: 10,
			            shadowOffsetX: 0,
			            shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			    }
			}
	    ],
		color:["#BC8DEE", "#8693F3",  '#9f51ff', '#ff32e4', "#2bdeff","#89C3F8","#F2A695","#FCC667","#AEB7F9","#748BFA"]
	};	
	myecharts.setOption(option);
}
$.get('data/bingtu.json', (data) => {
	bingtu(data);
})

function cloud(data){
	var myChart1 = echarts.init(document.getElementById('view5'));
	//温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
	var maskImage = new Image();
	maskImage.src = "img/333.png"
	
	maskImage.onload = function () {
	    myChart1.setOption({
	
	        title: {
	            text: '绵阳市民餐饮偏好',
	            // x: 'left',
	            //y:'100',
	            x: 'left',
	            textStyle: {
	                fontSize: 18,
	                //fontStyle: 'italic',
	                fontFamily: 'Microsoft YaHei'
	                , color: 'black'
	            }
	        },
	        tooltip: {
	            show: true
	        },
	
	        series: [{
	            type: 'wordCloud',
	            gridSize: 0,
	            width: '120%',
	            height: '120%',
	            sizeRange: [12, 45],
	            rotationRange: [-45, 0, 45, 90],
	
	            maskImage: maskImage,
	                                 textStyle: {
	                                     normal: {
	                                         color: function() {
	                                             return 'rgb(' +
	                                                     Math.round(Math.random() * 255) +
	                                                     ', ' + Math.round(Math.random() * 255) +
	                                                     ', ' + Math.round(Math.random() * 255) + ')'
	                                         }
	                                     },
										 fontFamily:"楷体",
	                                     emphasis: {
	                         shadowBlur: 10,
	                         shadowColor: '#333'
	                     }
	                                 },
	            data: data.ad
	        }]
	    })
	}
	
}
$.get('data/cloud.json', (data) => {
	cloud(data);
})
function leida(i,j,k,l,s){
	var myChart=echarts.init(document.getElementById('view4'))
	var option = {
	    title: [{
	        text: '店铺详情',
			textStyle:{
				color:"black",
				fontSize:18
			}
	    },
		{
			subtext:"店铺名称："+s,
			y:"6%",
			subtextStyle:{
				color:"black"
			}
		}],
	    tooltip: {},
	    radar: {
	        // shape: 'circle',
	        name: {
	            textStyle: {
	                color: '#fff',
	                backgroundColor: '#999',
	                borderRadius: 3,
	                padding: [3, 5]
	           }
	        },
	        indicator: [
	           { name: '店铺星级', max: 5},
	           { name: '口味评分', max: 10},
	           { name: '环境评分', max: 10},
	           { name: '服务评分', max: 10},
	        ],
			center:['50%','50%'],
			radius:80,
	    },
	    series: [{
	        name: '',
	        type: 'radar',
	        itemStyle: {normal: {areaStyle: {type: 'default'}}},
	        data : [
	            {
	                value : [i, j, k, l],
	                name : ''
	            }
	        ]
	    }]
	};
	myChart.setOption(option)
}
function zhutu(){
	var myChart=echarts.init(document.getElementById('rank'))
	var option = {	
	title : [
	{
	    text: '2015年度热门商家',
	    x:'left',
		textStyle:{
			fontSize:18,
			color:"black"
		}
	}
	],
    grid: {
        top: '25%',
        left: '20%',
        right: '15%',
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        data: ['好伦哥(北京好伦哥餐饮有限公)', '怡人怡口澳洲肥牛自助', '麦司玛琪'],
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'black'
            }
        },
        axisLabel: {
            interval: 0,
            rotate: 45
        },
    },
    yAxis: {
        show: false
    },
    series: [{
        name: '评论数',
        type: 'bar',
        barWidth: '50%',
        data: [1115,1137, 1080],
        itemStyle: {
            normal: {
                color: 'gold',
                label: {
					formatter:"{c}"+"次",
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: 'gold',
                        fontSize: 15
                    }
                }
            }
        }
    }]
};
	myChart.setOption(option);
}
zhutu()
function init(){
	leida(NaN,NaN,NaN,NaN,NaN)
	map.clearOverlays()
	getBoundary()
	let imgs=[];
	var img=document.getElementsByTagName('img');
	for(let i in img){
		console.log(i)
		if(img[i].id){
			imgs.push(img[i])
		}
	}
	for(let i in imgs){
		imgs[i].src="img/"+imgs[i].id+1+".png";
	}
}
leida(NaN,NaN,NaN,NaN,NaN)